<template>
  <div style="width: 20vw;background-color: rgb(33, 35, 39);height: 100%
;display: flex;flex-direction: column;padding-left: 2%">

    <div style="flex: 1;display: flex;align-items: center;">
      <img src="@/assets/logo/logo.png" alt="" style="height: 60px;object-fit: cover;">
      <h1 style="color: white;margin: 0"  class="koala-title">Koala</h1>
    </div>
    <div style="width: 100%;display: flex;align-items: center;">
      <a-button  :icon="h(PlusOutlined)" type="primary" style="" ghost>开启新对话</a-button>
    </div>

    <div style="flex: 7;">
      <Conversations
        class="Conversations"
        :style="style"
        :groupable="groupable"
        defaultActiveKey="demo1"
        :items="items"
    >
    </Conversations></div>
    <div style="flex: 1; display: flex;align-items: center;">
      <a-avatar :size="34">
        <template #icon>    <img src="@/assets/dev/avatar.jpeg" alt=""></template>
      </a-avatar>
      <h3 style="color: #acabab;font-weight: bolder;margin: 0;margin-left: 10px">个人信息</h3>
    </div>


  </div>
</template>

<script setup lang="ts">

import {ref , h} from "vue";
const isOpen = ref(false);
import { CommentOutlined , PlusOutlined , CloudDownloadOutlined} from '@ant-design/icons-vue';
import { Space, theme } from 'ant-design-vue';
import { Conversations, type ConversationsProps } from 'ant-design-x-vue';
import { computed } from 'vue';

// 定义组件名称
defineOptions({ name: 'AXConversationsGroupSort' });

// 生成对话项数据
const items: ConversationsProps['items'] = Array.from({ length: 2 }).map((_, index) => {
  const timestamp = index <= 3 ? 1732204800000 : 1732204800000 - 60 * 60 * 24;
  return {
    key: `item${index + 1}`,
    label: `你好，chat`,
    timestamp: timestamp + index * 60 * 60,
    group: index <= 3 ? '今天' : '昨天',
  };
});

// 获取主题 token
const { token } = theme.useToken();

// 计算样式
const style = computed(() => ({
  width: '100%',
  // background: token.value.colorBgContainer,
  borderRadius: token.value.borderRadius,
}));

// 定义 groupable 配置
// const groupable: ConversationsProps['groupable'] = {
//   sort(a, b) {
//     if (a === b) return 0;
//     return a === 'Today' ? -1 : 1;
//   },
// };
</script>

<style scoped>
.Conversations * {
  color: white !important;
}


</style>
